<template>
  <view class="container">
    <view class="bgwh pd_t_30" v-if="arr.id">
      <uCharts :scroll="arr.opts.enableScroll"
               :show="canvas"
               :canvasId="arr.id"
               :chartType="arr.chartType"
               :extraType="arr.extraType"
               :cWidth="cWidth"
               :cHeight="cHeight"
               :opts="arr.opts"
               :ref="arr.id"/>
    </view>
  </view>
</template>
<script>
  import uCharts from '../../components/leiqch-ucharts/u-charts.vue';
  import crt from '../../components/leiqch-ucharts/js/chartsUtil.js';
  import {request} from "../../util/api";

  export default {
    data() {
      return {
        canvas: false,
        cWidth: '',
        cHeight: '',
        arr: {}
      }
    },
    components: {uCharts},

    onLoad(e) {
      //this.init()
      this.getData()
    },

    methods: {
      init() {
        this.cWidth = uni.upx2px(750);
        this.cHeight = uni.upx2px(600);
      },

      getData() {
        request({
          url: '/app/userCenter/analysisSchoolGrade'
        }).then(res => {
          var categories = []
          var name = []
          res.data.forEach(item => {
            categories.push(item['年级'])
            name.push(item['name'])
          })
          categories = [...new Set(categories)]
          name = [...new Set(name)]
          var data = []
          name.forEach(item => {
            var obj = {}
            obj.name = item
            obj.data = []
            data.push(obj)
          })
          data.forEach(item => {
            categories.forEach((cate, index) => {
              let scroll = res.data.filter(itemScroll => {
                if (itemScroll['年级'] == cate && itemScroll['name'] == item.name) {
                  return itemScroll
                }
              })
              if (scroll.length) {
                item.data[index] = scroll[0]['分数']
              } else {
                item.data[index] = 0
              }
            })
          })
          var serverData = {
            group: '商品房预（现）售供应情况分析',
            title: '兵团商品房预（现）售供应月度情况',
            opts: {
              categories: categories,
              enableScroll: false,
              series: data,
              unit: "分",
            },
            chartType: "line",
            extraType: "default",
            id: "c0"
          }
          this.arr = serverData;
          this.canvas = true
          this.init()
        })
      }
    }
  }
</script>


<style>
  page {
    display: block;
    height: 100%;
    background-color: #efeff4;
  }

  .fl-row { display: flex; flex-direction: row; }
  .bgwh { background-color: #FFFFFF; }/*白色*/
  .g6 { color: #666; }/*浅黑*/
  .tc { text-align: center; }
  .f30 { font-size: 30upx; }
  .p10{ padding: 10upx; }
  .mt10{margin-top: 10upx;}
  .mb10{margin-bottom: 10upx;}
  .ml10{margin-left: 10upx;}
  .mr10{margin-right: 10upx;}

  .qiun-title-bar{
    width:96%;
    padding:10upx 2%;
    flex-wrap:nowrap;
  }

  .container {
    box-sizing: border-box;
    height: 100%;
    background-color: #efeff4;
  }

  .content {
    width: 750upx;
    height: calc(100% - 100upx);
    background-color: #efeff4;
  }
  .title {
    line-height: 80upx;
    background-color: #eee;
    text-indent: 20upx;
    font-size: 30upx;
    color: #000000;
    letter-spacing: 1px;
  }
  .i-cube {
    width: 12upx;
    height: 60upx;
    background-color: #007AFF;
    margin-right: 20upx;
  }

  .s-btn {
    font-size: 28upx;
    background-color: transparent;
    color: #f6a121;
    line-height: 1.8;
    padding-left: 20upx;
    padding-right: 20upx;
  }
  .s-btn:after {
    border: 2upx solid #8799A3;
  }
  .s-btn-hover {
    background-color: #f6a121;
    color: #FFFFFF;
  }

  .s-btn1 {
    font-size: 28upx;
    background-color: transparent;
    color: #f6a121;
    line-height: 1.8;
    padding-left: 20upx;
    padding-right: 20upx;
  }
  .s-btn1:after {
    border: 2upx solid #8799A3;
  }
  .s-btn1-hover {
    background-color: #007AFF;
    color: #FFFFFF;
  }
</style>
